	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Keyboard Controlled Image Movement</title>
	<style>
	 #movableImage {
	   position: absolute;
	   left: 50px;
	   top: 50px;
	   width: 100px;
	   height: 100px;
	 }
	</style>
	</head>
	<body>
	<img id="movableImage" src="./JPG300.jpg" alt="Movable Image">
	<script>
	 const image = document.getElementById('movableImage');
	 const moveStep = 10; // 每次按键移动的像素数
	 document.addEventListener('keydown', (event) => {
	  console.log(event);
	   switch (event.key) {
	     case 'ArrowUp':
	       image.style.top = `${image.offsetTop - moveStep}px`;
	       break;
	     case 'ArrowDown':
	       image.style.top = `${image.offsetTop + moveStep}px`;
	       break;
	     case 'ArrowLeft':
	       image.style.left = `${image.offsetLeft - moveStep}px`;
	       break;
	     case 'ArrowRight':
	       image.style.left = `${image.offsetLeft + moveStep}px`;
	       break;
	   }
	 });
	</script>
	</body>
	</html>